<template>
	<view class="add">
		<view class="type-box">
			<text>门票类型</text>
			<view class="type">
				<text class="type-item " :class="[current == index?'active':'']" @click="change(index)"
					v-for="(item,index) in typeList" :key='index'>{{item}}</text>
			</view>
		</view>
		<u-field v-model="dataForn.name" label="门票名称" placeholder="请填写门票名称" input-align='right'></u-field>
		<u-field v-model="dataForn.title" label="副标题" placeholder="请填写副标题" input-align='right'></u-field>
		<u-field v-model="scenticName" label="所属景区" disabled placeholder="请选择所属景区" input-align='right' @click="openscenic">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="activityName" label="活动类型" disabled placeholder="请选择活动类型" input-align='right' @click="openactivity">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="ticketName" label="门票分类" disabled placeholder="请选择门票分类" input-align='right' @click="openticket">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="dataForn.start_effective" label="开始时间" disabled placeholder="请选择开始时间" input-align='right'  @click="openstartime">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="dataForn.end_effective" label="结束时间" disabled placeholder="请选择结束时间" input-align='right'  @click="openendtime">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="mobile" disabled label="是否上架" input-align='right'>
			<view class="swith" slot='right'>
				<text>否</text>
				<u-switch v-model="onlinechecked" size='40' @change="upproduct"></u-switch>
				<text>是</text>
			</view>
		</u-field>
		<u-field v-model="mobile" disabled label="推荐首页" input-align='right'>
			<view class="swith" slot='right'>
				<text>否</text>
				<u-switch v-model="redchecked" size='40' @change="upred"></u-switch>
				<text>是</text>
			</view>
		</u-field>
		<u-field v-model="mobile" label="图文信息" disabled input-align='right' @click="openedit('details')">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="mobile" label="价格说明" disabled input-align='right' @click="openedit('others')">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<u-field v-model="mobile" label="预定须知" disabled input-align='right' @click="openedit('descript')">
			<u-icon slot='right' name="arrow-right"></u-icon>
		</u-field>
		<view class="unload">
			<view class="">图片</view>
			<view class="upload-list">
				<view class="img-item" v-for="(item,index) in imgList" :key='index'>
					<image style="width: 100%;height: 100%;" :src="item" mode=""></image>
					<view class="img-icon" @click="del(index)">
						<u-icon name="close-circle-fill" size='40' ></u-icon>
					</view>
				</view>
				<view class="upload-btn" @click="upload">
					<image src="../../static/pz.jpg" class="upload-image"></image>
				</view>
				<view class="img-item" v-for="(item,index) in imgList.length%3" :key='index'>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit">{{dataForn.pk_id?'修改':'添加'}}</view>
		<u-picker v-model="scenicShow" mode='selector' range-key='name' @confirm="scenic" :range="scenicList">
		</u-picker>
		<u-picker v-model="activityShow" mode='selector' range-key='name' @confirm="activity" :range="activityList">
		</u-picker>
		<u-picker v-model="ticketShow" mode='selector' range-key='name' @confirm="ticket" :range="ticketList">
		</u-picker>
		<u-picker v-model="starShow" mode='time' @confirm="startime" >
		</u-picker>
		<u-picker v-model="endShow" mode='time'  @confirm="endtime">
		</u-picker>
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload.js'
	import {
		uniModal,
		uniNavigate,
		uniToast,
		uniBack
	} from '@/utils/uniPromise.js'
	export default {
		data() {
			return {
				typeList: ['常规', '抢购'],
				current: 0,
				onlinechecked: false,
				redchecked:false,
				scenicList: [],
				activityList: [],
				ticketList: [],
				scenicShow: false,
				activityShow: false,
				ticketShow: false,
				starShow:false,
				endShow:false,
				scenticName:'',
				activityName:'',
				ticketName:'',
				imgList:[],
				common_details:{
					type:'2',
					fk_pro_id:'',
					details:'',
					others:'',
					descript:''
				},
				dataForn: {
					fk_business_id: 0, //所属商家ID
					fk_scenic_id: 0, //所属景区ID
					mode: 1, // 产品类型
					fk_activity_id: 0, //活动类型 关联活动类型ID
					one_level: '0', //一级分类  关联 b_classify ID
					two_level: '0', //二级分类  关联 b_classify ID
					name: '', //门票名称
					title: '', //副标题
					start_date: '', //活动开始时间（特价票）
					end_date: '', //活动结束时间（特价票）
					start_effective: '', //门票有效期（为时间段，开始）
					end_effective: '', //门票有效期（为时间段，结束）
					msg_mosaic: '', //短信拼接字符串(格式固定，用|隔开)
					insurance_list: '', //显示保险项目（勾选显示,用符号隔开）
					sale_time: '', //销售时间段，时间用','隔开
					purchaser: '', //产品采购人
					img: '', //图片，多图以，号分割
					poster_url: '', //海报图片路径
					xypos: '', //x轴坐标，y轴坐标，
					video: '', //产品采购人
					order_count: '0', // 产品虚拟销量
					sort: 0, //排序
					business_id: 0, //供应商ID（对应复制产品商家ID）
					business_pro_id: '', //供应商产品ID（复制产品时候记录）
					is_online: 0, //是否上架（0为未上架，1为已上架）
					is_red: 0, //是否推荐0为普通1为推荐
					integral: 0, //购送积分 1 赠送  0 不赠送
					is_purchase: 0, //是否提供采购 1、提供  0、不提供
					id_number: 0, //是否需要身份证号1 需要  0 不需要
					subscribe: 0, //是否需要预约   1 需要  0 不需要
				}
			}
		},
		onLoad(option) {
			this.initPage()
			if(option.pk_id){
				this.$GetQueryDataList('b_ticket_pro',1,1,{...option}).then(res=>{
					this.dataForn = res.data[0],
					this.current = this.dataForn.mode == 1?0:1 
					this.onlinechecked = this.dataForn.is_online == 1?true:false
					this.redchecked = this.dataForn.is_red == 1?true:false
					this.scenicList.forEach(item =>{
						if(item.pk_id == this.dataForn.fk_scenic_id){
							this.scenticName = item.name
						}
					})
					this.activityList.forEach(item =>{
						if(item.pk_id == this.dataForn.fk_activity_id){
							this.activityName = item.name
						}
					})
					this.ticketList.forEach(item =>{
						if(item.pk_id == this.dataForn.one_level){
							this.ticketName = item.name
						}
					})
					this.imgList = this.dataForn.img.split(',')
				})
				this.$GetQueryDataList('m_common_details',1,1,{fk_pro_id:option.pk_id,type:2},{setting:true,api:false}).then(aaa=>{
					this.common_details = {...this.common_details,...aaa.data[0]}
				})
			}
			
		},
		methods: {
			initPage() {
				this.dataForn.fk_business_id = this.vuex_business.pk_id
				let that = this
				Promise.all([
					that.$GetQueryDataList('b_ticket_scenic', 1, 9999, {
						fk_business_id: that.dataForn.fk_business_id
					}),
					that.$GetQueryDataList('m_common_activity', 1, 9999, {
						fk_business_id: that.dataForn.fk_business_id,
						type: 9
					}),
					that.$GetQueryDataList('m_common_classify', 1, 9999, {
						fk_business_id: that.dataForn.fk_business_id,
						type: 9
					}),
				]).then(res => {
					// console.log(res)
					this.scenicList = res[0].data
					this.activityList = res[1].data
					this.ticketList = res[2].data
				})
			},
			change(idx) {
				this.current = idx
				this.dataForn.mode = idx == 0?1:2
			},
			openscenic() {
				this.scenicShow = !this.scenicShow
			},
			openactivity() {
				this.activityShow = !this.activityShow
			},
			openticket() {
				this.ticketShow = !this.ticketShow
			},
			openstartime(){
				this.starShow = !this.starShow
			},
			openendtime(){
				this.endShow = !this.endShow
			},
			scenic(e) {
				// console.log(e)
				this.dataForn.fk_scenic_id = this.scenicList[e[0]].pk_id
				this.scenticName = this.scenicList[e[0]].name
			},
			activity(e){
				this.dataForn.fk_activity_id = this.activityList[e[0]].pk_id
				this.activityName = this.activityList[e[0]].name
			},
			ticket(e){
				this.dataForn.one_level = this.ticketList[e[0]].pk_id
				this.ticketName = this.ticketList[e[0]].name
			},
			startime(e){
				let time = e.year + '-'+e.month + '-' + e.day
				this.dataForn.start_effective = time
			},
			endtime(e){
				let time = e.year + '-'+e.month + '-' + e.day
				this.dataForn.end_effective = time
			},
			upproduct(e){
				this.dataForn.is_online = e?1:0
			},
			upred(e){
				this.dataForn.is_red = e?1:0
			},
			upload() {
				uploadImage().then(res=>{
					this.imgList = [...this.imgList,...res]
				})
			},
			openedit(val){
				uniNavigate(`/package/system/ticket/addticket/edit?title=${val}`)
				
			},
			del(idx){
				uniModal({
					content:'是否删除该图片'
				}).then(res=>{
					if(res == 'success'){
						this.imgList.splice(idx,1)
					}
				})
			},
			// 保存富文本图文
			getDetail(params){
				this.common_details[params.title] = params.content
			},
			submit(){
				if(!this.dataForn.name){
					return uniToast('门票名称不能为空')
				}else if(!this.dataForn.one_level){
					return uniToast('门票分类不能为空')
				}
				if(this.dataForn.pk_id){
					this.$UpdateModify('b_ticket_pro',{...this.dataForn}).then(()=>{
						this.$UpdateModify('m_common_details',{...this.common_details}).then(()=>{
							uniToast('修改成功')
							setTimeout(()=>{
								uniBack(1)
							},1000)
						})
					})
				}else{
					this.$AddNewData('b_ticket_pro',{...this.dataForn}).then(res=>{
						this.common_details.fk_pro_id = res.data
						this.$AddNewData('m_common_details',{...this.common_details}).then(res=>{
							uniToast('新增成功')
							setTimeout(()=>{
								uniBack(1)
							},1000)
						})
					})
				}	
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-label {
		text-align: right !important;
		justify-content: flex-end !important;
		flex: 0 0 60px !important;
	}

	.add {
		.type-box {
			display: flex;
			align-items: center;
			padding: 20rpx 28rpx;
			border-bottom: 1px solid #f1f1f1;
			justify-content: space-between;
			font-size: 28rpx;
			color: #303133;

			.type {
				display: flex;
				border: 1px solid #f1f1f1;
				border-radius: 10rpx;
				overflow: hidden;

				.type-item {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;

					&.active {
						background-color: #3297EF;
						color: #fff;
					}
				}
			}
		}
		.img-item{
			width: 216rpx;
			height: 216rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
			.img-icon{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
		.swith {
			display: flex;
			align-items: center;
		}

		.submit {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #3297EF;
			text-align: center;
			color: #fff;
			margin: 0 auto 20rpx;
			border-radius: 10rpx;
		}

		.unload {
			width: 100%;
			padding: 30rpx;
			.upload-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.upload-btn {
					width: 216rpx;
					height: 216rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #EEEEEE;
					border-radius: 10rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					.upload-image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
</style>
